<template>
  <!--评论分页-->
  <el-pagination
    @current-change="handleCurrentChange"
    :current-page="commentQuery.page.page"
    :page-count="commentTotalPage"
    layout="prev, pager, next"
    background
    hide-on-single-page
    class="pagination"
  >
  </el-pagination>
</template>

<script>
import { mapState } from 'vuex'
import {
  SET_COMMENT_QUERY_PAGE_PAGE,
  SET_PARENT_COMMENT_ID
} from '@/store/mutations-types'

export default {
  name: 'Pagination',
  computed: {
    ...mapState({
      commentQuery: state => state.comment.commentQuery,
      commentTotalPage: state => state.comment.commentTotalPage
    })
  },
  methods: {
    //监听页码改变的事件
    handleCurrentChange(newPage) {
      this.$store.commit(SET_COMMENT_QUERY_PAGE_PAGE, newPage)
      this.$store.commit(SET_PARENT_COMMENT_ID, -1)
      this.$store.dispatch('getCommentList')
    }
  }
}
</script>

<style scoped>
.pagination {
  margin-top: 2em;
  text-align: center;
}
</style>
